<template>
  <div :class="$style.container" v-analytics.pageview>
    <topbar title="Order Confirmation"></topbar>
    <div v-if="!hiddenContent">
      <div
        :class="$style.addressContent"
        v-if="!addressIsEmpty"
        @click="chooseAddress"
        v-analytics.click="{
          action: 'Shipping Address',
          category: 'Order Page',
        }"
      >
        <div :class="$style.addressImg">
          <img src="~assets/orderConfirmation/location.png" >
        </div>
        <div :class="$style.addressRight">
          <div :class="$style.addressInfo">
            <label :class="$style.labelTitle">Shipping Address</label>
            <label>{{orderConfirmationData.address.addressTitle}}</label>
            <label>{{orderConfirmationData.address.addressDetail}}</label>
          </div>
          <div :class="$style.arrowImg">
            <img src="~assets/orderConfirmation/rightArrow.png" >
          </div>
        </div>
      </div>
      <div
        :class="$style.emptyAddressContent"
        v-else-if="addressIsEmpty"
        @click="addAddress"
        v-analytics.click="{
          action: 'Shipping Address',
          category: 'Order Page',
        }"
      >
        <img src="~assets/orderConfirmation/addressPlus.png">
        <label>
          Add new shipping address
        </label>
      </div>
      <div :class="$style.payInfoContent">
        <div :class="$style.payIcon">
          <img src="~assets/orderConfirmation/payIcon.png">
        </div>
        <div>
          <label :class="$style.payTips" class="fz-14">
            you will pay
          </label>
        </div>
        <div>
          <label :class="$style.payPrice" class="fz-24" v-text="orderPirce">
          </label>
        </div>
      </div>
      <div class="table-row" :class="$style.list"  v-for="(item, index) in orderPriceInfo">
        <div :class="$style.leftItem">
          <label class="fz-12">
            {{item.leftTitle}}
          </label>
        </div>
        <div :class="[$style.rightItem,{ [$style.red]: item.isRed === 1 }]">
          <label class="fz-12">
            {{item.rightTitle}}
          </label>
        </div>
      </div>
      <div :class="$style.goodsListContent">
        <div class="table-row" :class="$style.goodsList" :key="item.skuId" v-for="item in orderConfirmationData.items">
        <div :class="$style.goodsImg">
          <img :src="item.imageUrl">
        </div>
        <div :class="$style.goodsContent">
          <div :class="$style.goodsTop">
            <div :class="$style.goodsTitle">
              {{item.shortTitle}}
            </div>
            <div :class="$style.goodsPrice">
              {{`${orderConfirmationData.currencySymbol} ${item.exchangeSkuPrice}`}}
            </div>
          </div>
          <div :class="$style.goodsCenter">
            <div :class="$style.isNew" v-if="item.isNewPersonGoods === '1'" >
              <label>New Juanpier Special</label>
            </div>
          </div>
          <div :class="$style.goodsBottom">
            <div :class="$style.goodsSku">
              {{`${item.primaryValue} ${item.secondaryValue}`}}
            </div>
            <div :class="$style.goodsNumber">
              {{`×${item.skuNum}`}}
            </div>
          </div>
        </div>
      </div>
      </div>
      <div :class="$style.payIconContent">
        <img src="~assets/orderConfirmation/safeIcon.png">
      </div>
      <v-button :class="$style.payButton" type="danger" @click="pay" >Pay</v-button>
    </div>
    <loading :show="showLoading" />
  </div>
</template>

<script>
import { toast, loading, topbar, button } from 'components'
import { mapState, mapGetters } from 'vuex'
import { analyticsFn } from 'directive/analytics'

export default {
  name: 'orderConfirmation',
  components: {
    toast,
    loading,
    topbar,
    vButton: button,
  },
  computed: {
    ...mapState({
      selected: state => state.address.selected,
      orderConfirmationData: state => state.order.orderConfirmationData,
    }),
    ...mapGetters([
      'addressIsEmpty',
      'orderPirce',
      'orderPriceInfo',
    ]),
  },
  data() {
    return {
      showLoading: false,
      hiddenContent: true,
    }
  },
  created() {
    this.showLoading = true
    this.$store.dispatch('getOrderConfirmation', {
      skuId: this.$route.query.skuId,
      count: this.$route.query.number,
      addressId: this.selected.addressId,
    }).then((res) => {
      this.hiddenContent = false
      this.showLoading = false
      if (res.code !== 1000) {
        toast(res.info)
      }
    })
  },
  methods: {
    pay() {
      const addressId = this.selected.addressId || this.orderConfirmationData.address.addressId
      if (!addressId) {
        toast('Please enter your shipping address')
        return
      }
      this.showLoading = true
      this.$store.dispatch('createOrder', { addressId, payChannel: 7 })
        .then((res) => {
          this.showLoading = false
          if (res.code === 1000) {
            if (res.data.pay.callPayUrl) {
              analyticsFn({
                category: 'Order Page',
                action: 'Create Order',
                label: '支付号',
                callback: () => {
                  location.href = res.data.pay.callPayUrl
                },
              })
            }
          } else {
            toast(res.info)
          }
        })
    },
    chooseAddress() {
      this.$router.push({
        path: '/addressList',
        query: { id: this.selected.addressId },
      })
      console.log('chooseAddress')
    },
    addAddress() {
      console.log('addAddress')
      this.$router.push({
        path: '/address',
      })
    },
  },
}
</script>

<style lang="scss" module>
.container {
  background-color: #f7f7f7;
  padding-bottom: 48px;
}

.addressContent {
  height: 80px;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  padding-left: 12px;
  padding-right: 12px;
}

.emptyAddressContent {
  height: 64px;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  padding-left: 60px;
  padding-right: 60px;
  align-items: center;
  img {
    width: 24px;
    height: 24px;
  }
  label {
    color: #ff464e;
    font-size: 16px;
    margin-left: 12px;
  }
}

.addressImg {
  display: flex;
  align-items: center;
  img {
    width: 24px;
    height: 24px;
  }
}


.addressRight {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

.addressInfo {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-left: 12px;
  label {
    font-size: 12px;
  }
}

.labelTitle {
  font-weight: bold;
}

.arrowImg {
  display: flex;
  align-self: center;
  justify-content:flex-end;
  align-items: center;
  img {
    width: 16px;
    height: 24px;
  }
}

.payInfoContent {
  display: flex;
  margin-top: 12px;
  background-color: #fff;
  flex-direction: column;
  img {
    width: 24px;
    height: 24px;
  }
  padding-bottom: 12px;
}

.payIcon {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

.payTips {
  display: flex;
  justify-content: center;
  padding-top: 4px;
  color: #9b9b9b;
}

.payPrice {
  display: flex;
  justify-content: center;
  padding-top: 4px;
  color: #4a4a4a;
}

.list {
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.leftItem {
  padding: 12px 0px 12px 12px;
}

.rightItem {
  padding: 12px 12px 12px 0px;
}

.red {
  color: #ff464e;
}

.goodsListContent {
  margin-top: 12px;
}

.goodsList {
  background-color: #fff;
  display: flex;
  flex-direction: row;
}

.goodsImg {
  padding: 12px;
  img {
    width: 56px;
    height: 56px;
  }
}

.goodsContent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

.goodsTop {
  display: flex;
  flex-direction: row;
  padding-top: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.goodsCenter {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.goodsBottom {
  display: flex;
  flex-direction: row;
  padding-bottom: 12px;
  align-items: flex-end;
  justify-content: space-between;
}

.goodsTitle {

}

.goodsPrice {
  padding-right: 12px;
}

.isNew {
  background: #FF464E;
  border-radius: 100px;
  padding: 5px;
  label {
    color: #fff;
    font-size: 12px;
  }
}

.goodsSku {
  color: #9b9b9b;
}

.goodsNumber {
  color: #9b9b9b;
  padding-right: 12px;
}

.payIconContent {
  margin-top: 16px;
  img {
    width: 360px;
    height: 48px;
  }
}

.payButton {
  position: fixed !important;
  bottom: 0;
}


</style>
